<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/pulice.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css">
    <style>
        .cnxh{background:#f5f5f5;}
        .cnxh-tit{padding:.5rem}
        .cnxh-tit img{width:4.6rem;height: 0.95rem;margin:auto}
        .cnxh-item{display: flex;justify-content: space-between;flex-wrap:wrap}
        .cnxh-item .cnxh-list{width: 49%;background:#fff;padding-bottom: 0.7rem;margin-bottom: 0.5rem;}
        .cnxh-item .cnxh-list img{width: 100%; height: 6.2rem;}
        .cnxh-list-name{margin-top: .25rem;padding: 0 0.55rem;font-size: 0.45rem;line-height: 1.8;width: 100%; height: 1.8rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: block-axis; -webkit-line-clamp: 2;}
        .cnxh-list-name .ziying{font-style:normal;padding: .1rem;background: red;color:#fff;border-radius:4px;font-size:0.45rem}
        .cnxh-list-money{padding:0 0.55rem;color:#ef0b21;font-size: 0.75rem;line-height: 1;margin-top: 0.25rem}
        .condition ul{line-height: 2.25rem;font-size: 0.6rem;position: relative;display: flex;background:#fff;text-align: center;height:inherit;box-shadow:0 0 1px 1px hsla(0,0%,80%,.99)}
        .condition li{width: 25%;}
        .condition{height: 2.25rem;}
        .active{color: #2a8fff}
        .loading{text-align: center;}
        .loading img{width:1rem;height:1rem;display:inline-block;vertical-align:middle;position:relative;top:-3px;}
    </style>
    <script src="../../js/libs/zepto.min.js"></script>

    <script src="../../js/vue.min.js"></script>
    <script>
        const SURL = "http://192.144.135.180/"; // 接口
        const imgUrl = "http://zzhtwl.oss-cn-qingdao.aliyuncs.com/"; // 图片地址
        var page = 1;

        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    result: []
                }
            });
            $('.hm-bar').load('../../data/headerOther.html',function () {
                $(this).find('.head-main').text('商品列表');
                $(this).find('.head-left').on('tap',function () {
                    window.history.back();
                })
            });
            $('.condition li').on('touchend',function () {
                publicClass($(this),'this');
                switch ($(this).text()) {
                    case '时间':
                        console.log('a');
                        loadAjax('isSelf','createTime asc');
                        break;
                    case '销量':
                        console.log('b');
                        loadAjax('isSelf','saleNum desc');
                        break;
                    case '价格':
                        console.log('c');
                        loadAjax('isSelf','shopPrice asc');
                        break;
                    case '推荐':
                        console.log('d');
                        loadAjax('isRecom,isSelf','createTime asc');
                        break;
                }
            });

            var str = sessionStorage.getItem('listType');
            switch (str){
                case '1':
                    loadAjax('isSelf','createTime asc');
                    break;
                case '2':
                    publicClass('','last');
                    loadAjax('isRecom,isSelf','createTime asc');
                    break;
                case '3':
                    loadAjax('isNew,isSelf','createTime desc');

            }
            function loadAjax(strType,strSort) {
                $.ajax({
                    url: SURL + 'app/goods/okGoods',
                    data: {
                        "type": strType,
                        "pageIndex": 1,
                        "order": strSort
                    },
                    success: function (data) {
                        $.each(data.data.maps, function (i) {
                            app.result.push(data.data.maps[i]);
                        });
                        var maxPage = data.data.tatolPage;
                        if (page >= maxPage) {
                            $('.loading').html("<img src=\"../../img/footerIcon1.png\" alt=\"\"/>没有更多了");
                        }
                        console.log(data);
                    }
                });
            }

            function publicClass(obj,str) {
                $('.condition li').removeClass('active');
                if (str == 'this') {
                    $('.condition li').removeClass('active');
                    $(obj).addClass('active');
                }else {
                    $('.condition li:last-child').addClass('active');
                }
            }
        })
    </script>
    <title>商品列表</title>
</head>
<body>
    <div id="app">
        <header class="hm-bar"></header>

        <div class="condition">
            <ul>
                <li class="active">时间</li>
                <li>销量</li>
                <li>价格</li>
                <li>推荐</li>
            </ul>
        </div>

        <div class="cnxh">
            <div class="cnxh-item">
                <div class="cnxh-list" v-for="goods in result">
                    <img :src="'http://zzhtwl.oss-cn-qingdao.aliyuncs.com/'+goods.goodsImg" alt=""/>
                    <div class="cnxh-list-name">
                        <i class="ziying">自营</i>
                        {{goods.goodsName}}
                    </div>
                    <div class="cnxh-list-money">
                        &yen;{{goods.shopPrice}}
                    </div>
                </div>
                <!--<div class="cnxh-list">
                    <img src="../../img/indexGoods2.png" alt=""/>
                    <div class="cnxh-list-name">
                        <i class="ziying">自营</i>
                        文字文字文字文字文字文字
                    </div>
                    <div class="cnxh-list-money">
                        &yen;1099
                    </div>
                </div>
                <div class="cnxh-list">
                    <img src="../../img/indexGoods2.png" alt=""/>
                    <div class="cnxh-list-name">
                        <i class="ziying">自营</i>
                        文字文字文字文字文字文字
                    </div>
                    <div class="cnxh-list-money">
                        &yen;1099
                    </div>
                </div>-->
            </div>
            <div class="loading">
                <img src="../../img/footerIcon1.png" alt=""/>
                上拉加载更多
            </div>
        </div>
    </div>
</body>
</html>